<template>
  <div style="height: 100%">
    <div style="height: 10%; padding: 0px 0px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="条件">
          <el-input placeholder="订单号 / 商品标题 / 购买账号 / 收货地址" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 90%" ref="divs">
      <el-table :data="tableData" style="width: 100%" :max-height="tableHeight" border>
        <el-table-column prop="orderId" label="订单号"> </el-table-column>
        <el-table-column prop="title" label="商品标题"> </el-table-column>
        <el-table-column prop="paytime" label="下单时间"> </el-table-column>
        <el-table-column prop="username" label="购买账号"> </el-table-column>
        <el-table-column prop="address" label="收货地址"> </el-table-column>
        <el-table-column prop="statu" label="状态"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
let tableData = ref([
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  },
  {
    orderId: '2020030311511231238',
    username: 'test1',
    paytime: '2016-05-02',
    title: '置物架',
    address: '上海市普陀区金沙江路 1518 弄',
    statu: '待发货'
  }
])
let tableHeight = ref()
onMounted(() => {
  tableHeight.value = proxy.$refs.divs.offsetHeight
})
</script>

<style lang="less" scoped>
.el-form-item {
  margin-bottom: 0px !important;
}
</style>
